<template>
    <view class='page'>
            <view style='flex:1;'>
                <view class='p-l-r'>
                    <div class="cardNo">卡号：{{ cardNo }}</div>
                    <view class='recharge-options'>
                        <view class='flex-align-items-center'>
                            <text class='f-36 flex-1'>充值</text>
                            <navigator class='flex-align-items-center' :url='`./record/index?id=` + cardId'>
                                <text class='color-999'>充值记录</text>
                                <view class='f-36 color-999'></view>
                            </navigator>
                        </view>
                        <view class='wrap m-t-30'>
                            <template v-for="(option, index) in options" :key="index">
                                <view class='option' :class="{selected : currentIndex == index}" @tap="selectOption(index)">
                                    <view class='content'>
                                        <view>
                                            <text class='amount'>{{ Number(option.amount) }}</text>
                                            <text class='unit'>元</text>
                                        </view>
                                        <view class='reward' v-if="option.reward > 0">赠送 {{ Number(option.reward) }} 元</view>
                                    </view>
                                </view>
                            </template>
                            <!-- <view class='option'>
                                <view class='content w-100 h-100'>
                                    <Input type='digit' placeholderClass='f-24' placeholder='自定义' class='w-100 h-100 f-36' value={formData.customAmount} onInput={e => inputAmount(e.detail.value)} />
                                </view>
                            </view> -->
                        </view>
                    </view>
                </view>
            </view>

            <view class='m-t-60 p-l-r'>
                <view class='text-center'><text class='color-999'>点击确定，即表示同意</text><navigator style='display:inline' class='color-primary' url=''>充值协议</navigator></view>
                <view class='m-t-60'>
                    <nut-button type="success" block size="large" @tap="recharge">确 定</nut-button>
                </view>
            </view>
        </view>

        
</template>


<script lang="ts" setup>
    import { ref } from 'vue'
    import { optionsApi } from '@/api/Recharge'
    import { rechargeApi } from '@/api/ChargingCard'
    import { requestPayment, showModal, showLoading, hideLoading, showToast, useRouter, tradePay, navigateBack } from '@/utils/framework'

    const router = useRouter()
    const cardNo = router.params.cardNo
    const cardId = Number(router.params.id)

    const options = ref<any[]>([])

    const currentIndex = ref(0)
    function selectOption(i:number) {
        currentIndex.value = i
    }

    async function recharge() {
        showLoading()
        const res = await rechargeApi(cardId, options.value[currentIndex.value].id)
        if(res.success) {
            const r = global.isWX ? (await requestPayment({...res.data})) : (await tradePay({tradeNO : res.data.tradeNo}))
            if(r) {
                setTimeout(() => {
                    hideLoading()
                    showToast('充值成功')
                    navigateBack()
                }, 3000)
            }else {
                hideLoading()
            }
        }else {
            hideLoading()
            showModal('支付失败')
        }
    }

    optionsApi().then(res => {
        if(res.data) {
            options.value = res.data
        }
    })
</script>

<style lang="scss" src="./index.scss"></style>